<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>image</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>
    <script type="text/javascript" src="/jquery.ajax.extend.js"></script>

    <script src="/webjars/vue/2.1.3/vue.js"></script>


</head>
<body>


<div class="container-fluid"  id="imageApp" style="margin: 10px auto;">

    <div class="row clearfix">

        <template v-for="(item,index) in dataList">

            <div class="col-sm-4">
                <div class="thumbnail">
                    <img :src="item"
                         @click="showModal(item)" class="img-responsive center-block">
                    <div class="caption">
                        <h3>缩略图标签</h3>
                        <p>一些示例文本。一些示例文本。</p>
                        <p>
                            <a href="#" class="btn btn-primary" role="button">
                                按钮
                            </a>
                            <a href="#" class="btn btn-default" role="button">
                                按钮
                            </a>
                        </p>
                    </div>
                </div>
            </div>

        </template>


    </div>




    <!-- 模态框（Modal） -->
    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">操作</h4>
                </div>
                <div class="modal-body">

                    <img :src="imageModalSrc"
                         class="img-responsive center-block">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

</div>



</body>
</html>



<script>

    var vm = new Vue({
        el: '#imageApp',
        data: {


            dataList:[],

            imageModalSrc:'',

        },
        methods: {
            
            showModal:function (pid) {

                this.imageModalSrc = pid;
                $('#imageModal').modal('show');

            },


            getDataList: function (page) {

                var _self = this;

                $.ajax({
                    url:'/image/all',
//                    data: _self.sysUserSearchForm,

                }).done(
                    function (dat) {

//                        console.log(dat);
                        if (dat.code == 0) {

//                            var data = dat.data;
//                            var dataList=data.records;
////                            _self.userList=data.records;
                            _self.dataList= dat.data;

                        }
                    }
                );
            }

        },
        mounted: function () {

            this.getDataList();
        }
    });

</script>